<template>
  <div class="pb-2">
    <div class="box">
      <div class="teacher-current-header d-flex  align-items-center fixed-top">
        <div class="mr-auto">
          <span class="font-medium ml-1">{{user.year}}·{{user.quarter}}季度</span>
        </div>
        <div class="d-flex align-items-center">
          <img :src="'xiaoren-active.png'| imgUrl" style="width:16px;height:19px;" />
          <span class="pl-1">徒弟:{{unGradStudents&&unGradStudents.length}}人</span>
        </div>
      </div>
      <div class="teacher-current-body">
         <StudentList :students="unGradStudents" route="/teacher/pages/tasks/index" @getAction="open"></StudentList>
      </div>
    </div>

      <div v-if="showAbility">
      <van-dialog use-slot show="true" @close="onCloseAbility" className="vant-dialog-class" catchtouchmove="preventTouchMove">
        <div class="ability-content-warpper ">
          <img :src="'dialog-bg.png'|imgUrl" alt="">
          <div class="ability-content">
            <h1 style="margin:16px 0; text-align:center;width:100%">学徒综合能力模型</h1>
            <view class="container">
              <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" :ec="ec"></ec-canvas>
            </view>
          </div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { AppUser } from '../../../utils/GlobalData'
import { Getter, Action } from 'vuex-class'
import StudentList from '@/components/StudentList.vue'

@Component({
  components: {
    StudentList
  },
  filters: {}
})
export default class TeacherCurrent extends Vue {
  @Action getUnGradStudents;
  @Getter unGradStudents;

  public get user (): AppUser {
    return this.$globalData.appUser
  }
  public async created () {
    if (this.unGradStudents === null) {
      await this.getUnGradStudents()
    }
  }

  public ec = {
    options: {}
  };
  public open (abilitys, job) {
    if (job === 0) {
      this.ec.options = {
        radar: {
          center: ['50%', '50%'],
          radius: '50%',
          name: {
            color: '#fff',
            fontSize: '13',
            rich: {} // 不加的话,字体大小有问题
          },
          indicator: [
            { name: '销售能力', max: 100 },
            { name: '策划能力', max: 100 },
            { name: '市场研究', max: 100 },
            { name: '管理能力', max: 100 },
            { name: '资源整合', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            areaStyle: { normal: {} },
            data: [
              {
                value: [
                  abilitys['XiaoShou'] || 0,
                  abilitys['CeHua'] || 0,
                  abilitys['ShiChang'] || 0,
                  abilitys['GuanLi'] || 0,
                  abilitys['ZiYuan'] || 0
                ]
              }
            ]
          }
        ]
      }
    } else if (job === 1) {
      this.ec.options = {
        radar: {
          center: ['50%', '50%'],
          radius: '50%',
          name: {
            color: '#fff',
            fontSize: '13',
            rich: {} // 不加的话,字体大小有问题
          },
          indicator: [
            { name: '团队人员管理', max: 100 },
            { name: '团队文化锻造', max: 100 },
            { name: '业务基础精进', max: 100 },
            { name: '技术工艺创新', max: 100 },
            { name: '外部资源整合', max: 100 },
            { name: '内部资源协调', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            areaStyle: { normal: {} },
            data: [
              {
                value: [
                  abilitys['TuanDuiRenYuan'] || 0,
                  abilitys['TuanDuiWenHua'] || 0,
                  abilitys['YeWuJiChu'] || 0,
                  abilitys['YeWuChuangXin'] || 0,
                  abilitys['ZiYuanDuiWai'] || 0,
                  abilitys['ZiYuanDuiNei'] || 0
                ]
              }
            ]
          }
        ]
      }
    }
    this.openAbility()
  }
  public showAbility = false;
  public openAbility () {
    this.showAbility = true
  }

  public onCloseAbility () {
    this.showAbility = false
  }
}
</script>

<style lang="stylus" scoped>

.teacher-current-header {
  top: $teacherHeaderHeight;
  background :#fff;
  height:$teacher-current-header-height
  margin :0 20px;
  border-radius :8px;
}
.teacher-current-body{
  padding-top:$teacher-current-header-height
}

</style>
